<template>
	<view class="container">
		<view class="tui-order-header">
			<view class="tui-text" v-if="data.deliverySn!=null">快递号码：
				<text class="tui-bold">{{data.deliverySn}}</text>
			</view>
			<view class="tui-text" v-if="data.deliverySn!=null">快递运输：{{data.deliveryCompany}}</view>
			<view class="tui-text">预计送达：发货的8天内</view>
		</view>
		<view class="tui-order-tracking" v-if="list.length!=0">
			<tui-time-axis>
		
				<tui-timeaxis-item backgroundColor="transparent" v-for="(item,i) in list" :key="i">
					<template v-slot:node>
						<view class="tui-node-dot"></view>
					</template>
				
					<template v-slot:content>
						<view class="tui-order-desc tui-light-gray tui-ptop">{{item.name}}</view>
						<view class="tui-order-time tui-gray">{{item.time}}</view>
					</template>
				</tui-timeaxis-item>
			</tui-time-axis>
		</view>
		<view class="tui-order-tracking" v-else>
			<tui-time-axis>

				<tui-timeaxis-item backgroundColor="transparent" v-if="data.status==3">
					<template v-slot:node>
						<view class="tui-node" :style="{backgroundColor:backgroundColor}">
							<tui-icon name="check" color="#fff" :size="14" :bold="true"></tui-icon>
						</view>
					</template>

					<template v-slot:content>
						<view>
							<view class="tui-order-title">已签收</view>
							<view class="tui-order-desc">您的订单已由本人签收。感谢您在商城购物，欢迎再次光临。</view>
							<view class="tui-order-time tui-gray">2019-05-01 18:48:26</view>
						</view>
					</template>
				</tui-timeaxis-item>

				
				<tui-timeaxis-item backgroundColor="transparent" v-if="data.status<=3&&data.status>=2">
					<template v-slot:node>
						<view class="tui-node">
							<tui-icon name="order" color="#fff" :size="12"></tui-icon>
						</view>
					</template>
					<template v-slot:content>
						<view class="tui-order-title tui-gray">已发货</view>
						<view class="tui-order-desc tui-light-gray">您的订单已发货，请注意查收</view>
					</template>
				</tui-timeaxis-item>
				
				<tui-timeaxis-item backgroundColor="transparent" v-if="data.status<=3&&data.status>=1">
					<template v-slot:node>
						<view class="tui-node">
							<tui-icon name="home" color="#fff" :size="12"></tui-icon>
						</view>
					</template>
					<template v-slot:content>
						<view class="tui-order-title tui-gray">待发货</view>
						<view class="tui-order-desc tui-light-gray">您的订单等等商家处理</view>
					</template>
				</tui-timeaxis-item>
					
				
				<tui-timeaxis-item backgroundColor="transparent" >
					<template v-slot:node>
						<view class="tui-node">
							<tui-icon name="order" color="#fff" :size="12"></tui-icon>
						</view>
					</template>
					<template v-slot:content>
						<view class="tui-order-title tui-gray">已下单</view>
						<view class="tui-order-desc tui-light-gray">您提交了订单，请等待第三方卖家系统弄确认</view>
						<view class="tui-order-time tui-gray">{{data.createTime}}</view>
					</template>
				</tui-timeaxis-item>
			</tui-time-axis>
		</view>
		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>
		
		<failTimeout v-show="failTimeout"></failTimeout>
	</view>
</template>

<script>
	import OmsPortalOrderController from '../../api/OmsPortalOrderController.js'
	import {formatDate} from '../../utils/date.js'
	export default {
		data() {
			return {
				failTimeout:false,
               backgroundColor:"#5677fc",
			   data:{},
			   list:[],
			}
		},
		async onLoad(options){
			this.backgroundColor="#EB0909";
			setTimeout(()=>{
				uni.setNavigationBarColor({
					backgroundColor:this.backgroundColor,
					frontColor:"#ffffff"
				})
			},50)
			await OmsPortalOrderController.detail(options.orderId).then(res=>{
				
				if(res.data.code==200){
					res.data.data.createTime=formatDate(new Date(res.data.data.createTime),'yyyy-MM-dd hh:mm:ss')
					this.data=res.data.data
					console.log(this.data)
				}
				
			}).catch(err=>{
				if(err.errMsg=='request:fail timeout'){
					this.failTimeout=true
				}
			})
			
			await OmsPortalOrderController.trackingGetById(options.orderId).then(res=>{
				if(res.data.code==200){
					this.list=res.data.data
				}
			}).catch(err=>{
				if(err.errMsg=='request:fail timeout'){
					this.failTimeout=true
				}
			})
			
		}
	}
</script>

<style scoped>
	.tui-order-header {
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-text {
		font-size: 28rpx;
		color: #333;
		padding: 4rpx;
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-node {
		height: 44rpx;
		width: 44rpx;
		border-radius: 50%;
		background-color: #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		flex-shrink: 0;
	}

	.tui-node-dot {
		height: 16rpx;
		width: 16rpx;
		background-color: #ddd;
		border-radius: 50%;
		/* transform: translateY(45%); */
		margin-top: 6rpx;
	}

	.tui-bg-primary {
		background: #EB0909 !important;
	}

	.tui-order-tracking {
		padding: 30rpx 30rpx 30rpx 40rpx;
		background: #fff;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.tui-order-title {
		padding-bottom: 12rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.tui-order-desc {
		padding-bottom: 12rpx;
		font-size: 28rpx;
		color: #333;
	}

	.tui-ptop {
		display: flex;
		justify-content: flex-start;
	}

	.tui-order-time {
		font-size: 24rpx;
		font-weight: bold;
	}

	.tui-gray {
		color: #848484 !important;
	}

	.tui-light-gray {
		color: #888 !important;
	}

	.tui-primary {
		color: #5677fc;
	}
</style>
